<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<div class="page-content header-wrapper">
  <div id="header" class="bubbleTrigger">
    <div id="site-title" class="clearfix">
      <h1 id="logo"><a href="#"><s:text name="common.website.brand.name"/></a></h1>

      <p class="headline"><s:text name="common.website.brand.description"/></p>
    </div>

    <div class="shadow-left">
      <div class="shadow-right clearfix">
        <p class="nav-extra">
          <s:a href="http://twitter.com/morgan0329" cssClass="nav-extra twitter" title="Follow me on Twitter">
            <span><s:text name="common.website.rightHeader.twitter"/></span>
          </s:a>
          <s:a href="#" cssClass="nav-extra rss" title="RSS Feeds">
            <span><s:text name="common.website.rightHeader.rssFeeds"/></span>
          </s:a>
        </p>

        <!-- main navi -->
        <ul id="navigation" class="clearfix">
          <s:set name="headerID"><%= request.getParameter("headerID") %></s:set>
          
          <s:if test="#headerID==1">
            <li class="active home"><s:a cssClass="home active fadeThis" href="#"><span class="title"><s:text name="header.navigation.sc1"/></span></s:a></li>
          </s:if>
          <s:else>
            <s:url id="index" value="index_input.action"/>
            <li class="home"><s:a cssClass="fadeThis" href="%{index}"><span class="title"><s:text name="header.navigation.sc1"/></span></s:a></li>
          </s:else>
          
          <s:if test="#headerID==2">
            <li class="active">
              <s:a cssClass="active fadeThis" href="#"><span class="title"><s:text name="header.navigation.sc2"/></span></s:a>
              <ul>
                <li><a href="blog_input.action" class="fadeThis"><s:text name="header.navigation.sc2.sub01"/></a></li>
                <li><a href="category_input.action" class="fadeThis"><s:text name="header.navigation.sc2.sub02"/></a></li>
                <li><a href="account_input.action" class="fadeThis"><s:text name="header.navigation.sc2.sub03"/></a></li>
                <li><a href="blogComment_input.action" class="fadeThis"><s:text name="header.navigation.sc2.sub04"/></a></li>
                <li><a href="tag_input.action" class="fadeThis"><s:text name="header.navigation.sc2.sub05"/></a></li>
              </ul>
            </li>
          </s:if>
          <s:else>
            <s:url id="blog" value="blog_input.action"/>
            <li>
              <s:a cssClass="fadeThis" href="%{blog}"><span class="title"><s:text name="header.navigation.sc2"/></span></s:a>
              <ul>
                <li><a href="blog_input.action" class="fadeThis"><s:text name="header.navigation.sc2.sub01"/></a></li>
                <li><a href="category_input.action" class="fadeThis"><s:text name="header.navigation.sc2.sub02"/></a></li>
                <li><a href="account_input.action" class="fadeThis"><s:text name="header.navigation.sc2.sub03"/></a></li>
                <li><a href="blogComment_input.action" class="fadeThis"><s:text name="header.navigation.sc2.sub04"/></a></li>
                <li><a href="tag_input.action" class="fadeThis"><s:text name="header.navigation.sc2.sub05"/></a></li>
              </ul>
              </li>
          </s:else>
          
          <s:if test="#headerID==3">
            <li class="active"><s:a cssClass="active fadeThis" href="#"><span class="title"><s:text name="header.navigation.sc3"/></span></s:a></li>
          </s:if>
          <s:else>
            <s:url id="TODO" value="#"/>
            <li><s:a cssClass="fadeThis" href="%{TODO}"><span class="title"><s:text name="header.navigation.sc3"/></span></s:a></li>
          </s:else>
          
          <s:if test="#headerID==4">
            <li class="active"><s:a cssClass="active fadeThis" href="#"><span class="title"><s:text name="header.navigation.sc4"/></span></s:a></li>
          </s:if>
          <s:else>
            <s:url id="TODO" value="#"/>
            <li><s:a cssClass="fadeThis" href="%{TODO}"><span class="title"><s:text name="header.navigation.sc4"/></span></s:a></li>
          </s:else>
          
          <s:if test="#headerID==5">
            <li class="active"><s:a cssClass="active fadeThis" href="#"><span class="title"><s:text name="header.navigation.sc5"/></span></s:a></li>
          </s:if>
          <s:else>
            <s:url id="TODO" value="#"/>
            <li><s:a cssClass="fadeThis" href="%{TODO}"><span class="title"><s:text name="header.navigation.sc5"/></span></s:a></li>
          </s:else>
          
          <s:if test="#headerID==6">
            <li class="active"><s:a cssClass="active fadeThis" href="#"><span class="title"><s:text name="header.navigation.sc6"/></span></s:a></li>
          </s:if>
          <s:else>
            <s:url id="TODO" value="#"/>
            <li><s:a cssClass="fadeThis" href="%{TODO}"><span class="title"><s:text name="header.navigation.sc6"/></span></s:a></li>
          </s:else>

          <s:if test="#headerID==7">
            <li class="active"><s:a cssClass="active fadeThis" href="#"><span class="title"><s:text name="header.navigation.sc7"/></span></s:a></li>
          </s:if>
          <s:else>
            <s:url id="TODO" value="#"/>
            <li><s:a cssClass="fadeThis" href="%{TODO}"><span class="title"><s:text name="header.navigation.sc7"/></span></s:a></li>
          </s:else>
          
          <%--
          
          <s:if test="#headerID==8">
            <li class="active">
            <s:a cssClass="active fadeThis" href="#"><span class="title"><s:text name="header.navigation.sc8"/></span></s:a>
            <ul>
              <li><a href="index-col-1.action" class="fadeThis"><s:text name="header.navigation.sc8.sub01"/></a></li>
              <li><a href="index_input.action" class="fadeThis"><s:text name="header.navigation.sc8.sub02"/></a></li>
              <li><a href="index-col-2-left.action" class="fadeThis"><s:text name="header.navigation.sc8.sub03"/></a></li>
              <li><a href="index-col-3.action" class="fadeThis"><s:text name="header.navigation.sc8.sub04"/></a></li>
              <li><a href="index-col-3-right.action" class="fadeThis"><s:text name="header.navigation.sc8.sub05"/></a></li>
              <li><a href="index-col-3-left.action" class="fadeThis"><s:text name="header.navigation.sc8.sub06"/></a></li>
              <li><a href="index-fluid.action" class="fadeThis"><s:text name="header.navigation.sc8.sub07"/></a></li>
            </ul>
            </li>
          </s:if>
          <s:else>
            <s:url id="TODO" value="#"/>
            <li>
              <s:a cssClass="fadeThis" href="%{TODO}"><span class="title"><s:text name="header.navigation.sc8"/></span></s:a>
            <ul>
              <li><a href="index-col-1.action" class="fadeThis"><s:text name="header.navigation.sc8.sub01"/></a></li>
              <li><a href="index_input.action" class="fadeThis"><s:text name="header.navigation.sc8.sub02"/></a></li>
              <li><a href="index-col-2-left.action" class="fadeThis"><s:text name="header.navigation.sc8.sub03"/></a></li>
              <li><a href="index-col-3.action" class="fadeThis"><s:text name="header.navigation.sc8.sub04"/></a></li>
              <li><a href="index-col-3-right.action" class="fadeThis"><s:text name="header.navigation.sc8.sub05"/></a></li>
              <li><a href="index-col-3-left.action" class="fadeThis"><s:text name="header.navigation.sc8.sub06"/></a></li>
              <li><a href="index-fluid.action" class="fadeThis"><s:text name="header.navigation.sc8.sub07"/></a></li>
            </ul>
            </li>
          </s:else>
          --%>

            <s:url id="colorGreen" value="color_input.action?color=green"/>
            <s:url id="colorBlue" value="color_input.action?color=blue"/>
            <s:url id="colorRed" value="color_input.action?color=red"/>
            <s:url id="colorGray" value="color_input.action?color=gray"/>
          <s:if test="#headerID==9">
            <li class="active">
            <s:a cssClass="active fadeThis" href="#"><span class="title"><s:text name="header.navigation.sc9"/></span></s:a>
            <ul>
              <li><s:a href="%{colorGreen}" cssClass="fadeThis"><s:text name="header.navigation.sc9.sub01"/></s:a></li>
              <li><s:a href="%{colorBlue}" cssClass="fadeThis"><s:text name="header.navigation.sc9.sub02"/></s:a></li>
              <li><s:a href="%{colorRed}" cssClass="fadeThis"><s:text name="header.navigation.sc9.sub03"/></s:a></li>
              <li><s:a href="%{colorGray}" cssClass="fadeThis"><s:text name="header.navigation.sc9.sub04"/></s:a></li>
            </ul>
            </li>
          </s:if>
          <s:else>
            <li>
              <s:a cssClass="fadeThis" href="%{colorGreen}"><span class="title"><s:text name="header.navigation.sc9"/></span></s:a>
            <ul>
              <li><s:a href="%{colorGreen}" cssClass="fadeThis"><s:text name="header.navigation.sc9.sub01"/></s:a></li>
              <li><s:a href="%{colorBlue}" cssClass="fadeThis"><s:text name="header.navigation.sc9.sub02"/></s:a></li>
              <li><s:a href="%{colorRed}" cssClass="fadeThis"><s:text name="header.navigation.sc9.sub03"/></s:a></li>
              <li><s:a href="%{colorGray}" cssClass="fadeThis"><s:text name="header.navigation.sc9.sub04"/></s:a></li>
            </ul>
            </li>
          </s:else>
          
        </ul>
        <!-- /main navi -->

      </div>
    </div>
  </div>
</div>